<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" :title="typeTitle + '详情'" width="80%" @open="openDialog" @close="closeDialog">
    <div v-if="props.dialogType === 'warehousing'" class="view-equip-detail">
      <div class="view-equip-title">入库基本信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库单号</div>
            <div class="text">{{ warehousingFormValue.inNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库人员</div>
            <div class="text">{{ warehousingFormValue.inboundName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库时间</div>
            <div class="text">{{ warehousingFormValue.inDate || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ warehousingFormValue.classNameDesc || "-" }}</div>
          </div>
          <div class="view-equip-item large">
            <div class="label">关联单据</div>
            <div class="text">{{ warehousingFormValue.billNum || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ warehousingFormValue.remark || "-" }}</div>
          </div>
        </div>
      </div>

      <div class="view-equip-title">入库列表</div>
      <px-table :data="warehousingFormValue.inventoryDetailDTOList" class="equip-table" size="small" height="360" border>
        <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in inTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
      </px-table>
    </div>
    <div v-if="props.dialogType === 'outbound'" class="view-equip-detail">
      <div class="view-equip-title">出库基本信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">出库单号</div>
            <div class="text">{{ outboundFormValue.outNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">领用人</div>
            <div class="text">{{ outboundFormValue.recipientName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">用途</div>
            <div class="text">{{ outboundFormValue.usedDesc || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ outboundFormValue.classNameDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">关联单据</div>
            <div class="text">{{ outboundFormValue.billNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">领取时间</div>
            <div class="text">{{ outboundFormValue.outDate || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ outboundFormValue.remark || "-" }}</div>
          </div>
        </div>
      </div>

      <div class="view-equip-title">出库列表</div>
      <px-table :data="outboundFormValue.inventoryDetailDTOList" class="equip-table" size="small" height="360" border>
        <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in outTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
      </px-table>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed } from "vue";
import { getSparePartsWarehousing, getSparePartsOutbound } from "@/api/equip/spareParts";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "dialogType", "sparePartsId", "id"]);
const visible = computed(() => props.visible);
// 页面本身的值
const state = reactive<any>({
  typeTitle: "入库",
  warehousingFormValue: {},
  outboundFormValue: {},
  inTableColumns: [
    { prop: "categoryDesc", label: "种类", minWidth: "120", showOverflowTooltip: true, fixed: "left" },
    { prop: "sparePartName", label: "名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "sparePartCode", label: "编码", minWidth: "180", showOverflowTooltip: true },
    { prop: "typeName", label: "类型", minWidth: "130", showOverflowTooltip: true },
    { prop: "brandName", label: "品牌", minWidth: "130", showOverflowTooltip: true },
    { prop: "supplyModel", label: "厂商型号", minWidth: "130", showOverflowTooltip: true },
    { prop: "model", label: "厂内型号", minWidth: "130", showOverflowTooltip: true },
    { prop: "warehousePositionDesc", label: "库位", minWidth: "130", showOverflowTooltip: true },
    { prop: "quantity", label: "入库数量", minWidth: "120", showOverflowTooltip: true }
  ],
  outTableColumns: [
    { prop: "categoryDesc", label: "种类", minWidth: "120", showOverflowTooltip: true, fixed: "left" },
    { prop: "sparePartName", label: "名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "sparePartCode", label: "编码", minWidth: "180", showOverflowTooltip: true },
    { prop: "typeName", label: "类型", minWidth: "130", showOverflowTooltip: true },
    { prop: "brandName", label: "品牌", minWidth: "130", showOverflowTooltip: true },
    { prop: "supplyModel", label: "厂商型号", minWidth: "130", showOverflowTooltip: true },
    { prop: "model", label: "厂内型号", minWidth: "130", showOverflowTooltip: true },
    { prop: "warehousePositionDesc", label: "库位", minWidth: "130", showOverflowTooltip: true },
    { prop: "quantity", label: "出库数量", minWidth: "120", showOverflowTooltip: true }
  ]
});
const { typeTitle, warehousingFormValue, outboundFormValue, inTableColumns, outTableColumns } = toRefs(state);
// 查询入库详情
const queryWarehousingTable = async () => {
  warehousingFormValue.value = {};
  const params = { sparePartId: props.sparePartsId, id: props.id };
  const data = await getSparePartsWarehousing(params);
  warehousingFormValue.value = data;
};
// 查询出库详情
const queryOutboundTable = async () => {
  outboundFormValue.value = {};
  const params = { sparePartId: props.sparePartsId, id: props.id };
  const data = await getSparePartsOutbound(params);
  outboundFormValue.value = data;
};
// 打开弹窗
const openDialog = () => {
  if (props.dialogType === "warehousing") {
    typeTitle.value = "入库";
    queryWarehousingTable();
  } else if (props.dialogType === "outbound") {
    typeTitle.value = "出库";
    queryOutboundTable();
  }
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.equip-dialog-wrap {
  .view-equip-detail {
    height: calc(100vh - 380px);
    overflow-y: auto;
  }
}
</style>
